<template>
<div class="login-container" @keyup.enter="login">
  <div class="wrapper">
    <div class="container">
      <h1>智慧车位管理系统</h1>
      <div class="form">
        <input type="text" placeholder="账户" v-model="acount">
        <input type="password" placeholder="密码" v-model="pwd" >
        <div class="code" >
          <input type="text" placeholder="验证码" v-model="captchaTxt">
          <!--<canvas id="c1"></canvas>-->
        </div>
        <div class="captcha-container" >
          <!--<div ref="canvas" class="captcha-container-img">{{captcha}}</div>-->
          <!--<img class="captcha-container-img" :src="captcha"/>    -->
          <canvas ref="canvas" width="120" height="40" class="captcha-container-img"> </canvas>
          <div class="captcha-container-refresh"  @click="refresh">看不清？换一张</div>
        </div>
        <a id="login-button" @click="login" >Login</a>
        <p v-if="error" class="am-text-center am-text-danger">{{error}}</p>
      </div>
    </div>
    <ul class="bg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
</template>

<script>
  import * as apis from '../apis'
  import { mapActions } from 'vuex'
  export default {
    data () {
      return {
        acount: '',
        pwd: '',
				error: false,
        captcha: '',
        captchaTxt: ''
      }
    },
    created() {
      console.log("123");
      this.genCaptcha()
    },
  	mounted () {
  	},
  	computed: {
		},
  	methods: {
      ...mapActions([
      'setUser'
      ]),
      login () {
        this.error = ''
        if (!this.acount) {this.error = '请输入用户名'; return;}
        if (!this.pwd) {this.error = '请输入密码'; return;}
        if (!this.captchaTxt) {this.error = '请输入验证码'; return;}
        let captchaId = localStorage.getItem('captchaId')
        apis.login(this.acount, this.pwd, captchaId, this.captchaTxt).then(({data: data}) => {
          console.log('data',data)
          if (data && data.errcode === 0 && data.data.jwt) {
            window.sessionStorage.setItem('token', data.data.jwt)
          console.log('token',data.data.jwt)

            // window.sessionStorage.setItem('user', data.result.user)
            // this.setUser(data.result.user)
            this.$router.push({ name: 'Home' })
          } else {
            if (data.errcode === 90014 || data.errcode === 90033 || data.errcode === 90034 ) this.error = data.message
            this.genCaptcha()
          }
        })
      },
      guid() {
        function S4() {
          return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
        }
       return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
      },
      genCaptcha() {
        let captchaId = localStorage.getItem('captchaId')
        if (!captchaId) captchaId = this.guid()
        localStorage.setItem('captchaId', captchaId)
        apis.genCaptcha(captchaId)
        .then(res => {
          if (res.body.errcode === 0) {
            this.$nextTick(() => {
              this.drawPic(res.body.data)
            })
          }
        })
        .catch(e => console.log(e))
      },
      refresh () {
        this.genCaptcha()
      },
      // 生成一个随机数
      randomNum(min,max){
        return Math.floor( Math.random()*(max-min)+min);
      },
      // 随机颜色
      randomColor(min,max){
        var r = this.randomNum(min,max);
        var g = this.randomNum(min,max);
        var b = this.randomNum(min,max);
        return "rgb("+r+","+g+","+b+")";
      },
      /**绘制验证码图片**/
      drawPic(str){
        var canvas=this.$refs.canvas
        var width=canvas.width;
        var height=canvas.height;
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';
        /**绘制背景色**/
        ctx.fillStyle = this.randomColor(180,240); //颜色若太深可能导致看不清
        ctx.fillRect(0,0,width,height);

           /**绘制文字**/
          // var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
          for(var i=0; i<4; i++){
            var txt = str[i];
            ctx.fillStyle = this.randomColor(50,160);  //随机生成字体颜色
            ctx.font = this.randomNum(30,40)+'px SimHei'; //随机生成字体大小
            var x = 10+i*26;
            var y = this.randomNum(35,40);
            var deg = this.randomNum(-25, 25);
            //修改坐标原点和旋转角度
            ctx.translate(x,y);
            ctx.rotate(deg*Math.PI/180);
            ctx.fillText(txt, 0, 0);
            //恢复坐标原点和旋转角度
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
          }
        /**绘制干扰线**/
        for(var i=0; i<3; i++){
          ctx.strokeStyle = this.randomColor(40,180);
          ctx.beginPath();
          let x = this.randomNum(0,width)
          let y = this.randomNum(0,height)
          ctx.moveTo( x, y );
          ctx.lineTo( this.randomNum(x - 30, x + 30), this.randomNum(y - 30, y + 30) );
          ctx.stroke();
        }
        // // /**绘制干扰点**/
        for(var i=0; i<10; i++){
          ctx.fillStyle = this.randomColor(0,255);
          ctx.beginPath();
          ctx.arc(this.randomNum(0,width),this.randomNum(0,height), 1, 0, 2*Math.PI);
          ctx.fill();
        }
      }
  	}
  }
</script>
<style type="text/css">

.login-container {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}
.login-container {
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
.login-container ::-webkit-input-placeholder {
  /* WebKit browsers */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
.login-container :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
.login-container ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
.login-container :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
.wrapper {
  background: #5078a3;
  background: -webkit-linear-gradient(top left, #5078a3 0%, #53c2e3 100%);  /*#50a3a2 #53e3a6*/
  background: linear-gradient(to bottom right, #5078a3 0%, #53c2e3 100%);
  opacity: 0.8;
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

}

.wrapper.form-success .container h1 {
  -webkit-transform: translateY(85px);
      -ms-transform: translateY(85px);
          transform: translateY(85px);
}
.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 80px 0;
  height: 400px;
  text-align: center;
}
.container h1 {
  width: vw100;
  font-size: 40px;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-put;
          transition-timing-function: ease-in-put;
  font-weight: 200;
}
.login-container .form {
  padding: 20px 0;
  position: relative;
  z-index: 2;
}
.login-container .form input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 100%;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  font-size: 18px;
  color: white;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
}
.login-container .form input:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.login-container .form input:focus {
  background-color: white;
  color: #53e3a6;
}
.login-container .form a {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color: white;
  border: 0;
  padding: 10px 15px;
  color: #53e3a6;
  border-radius: 3px;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-size: 18px;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.login-container .form a:hover {
  background-color: #f5f7f9;
}
.login-container .bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.login-container .bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  /*border-radius: 50%;*/
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.login-container .bg-bubbles li:nth-child(1) {
  left: 10%;
}
.login-container .bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.login-container .bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.login-container .bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.login-container .bg-bubbles li:nth-child(5) {
  left: 70%;
}
.login-container .bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.login-container .bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.login-container .bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.login-container .bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.login-container .bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}
.login-container .code{
  position: relative;
}
.login-container .code #c1{
  position: absolute;
  top: 7%;
  right: 2px;
}
.login-container .code input{
  float: left;
}
.captcha-container{
  display: inline-flex;
  justify-content: space-between;
  width:100%;
  height: 46px;
}
.captcha-container-img{
  width:50%;
  align-items: center;
}
.captcha-container-refresh{
  cursor: pointer;
  width:50%;
  align-items: center;
  margin-left: 10px;
  padding: 10px;
  font-size: 20px;
  line-height: 20px;
}

.captcha-container-refresh:hover{
  /*color: palevioletred;*/
  color: #74dfff;
}

/*手机屏幕显示*/
@media screen and (max-width: 768px) {
  .container{
    margin-top: 80px;
  }
  .container h1{
    font-size: 35px;
  }
}


</style>